<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>专项保养工单详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <style>
        #layer-images img {
            width: 160px;
            height: 160px;
            margin: 5px;
        }
    </style>
</head>
<body>

<div class="layui-fluid" id="container">
    <div class="layui-card">
        <div class="layui-card-header">基本信息</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="maintain-form">
                <input type="hidden" name="id">
                <div class="layui-row">
                    <div v-if="form.state>0" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">专项单号</label>
                            <div class="layui-input-block">
                                <input type="text" name="no" class="layui-input" v-model="form.no" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div v-if="form.state==0" class="layui-form-item">
                            <label class="layui-form-label">专项名称</label>
                            <div class="layui-input-block">
                                <select id="maintain-name" lay-filter="maintain-name" lay-search>
                                    <option value="">选择专项名称</option>
                                </select>
                            </div>
                        </div>
                        <div v-if="form.state>0" class="layui-form-item">
                            <label class="layui-form-label">专项名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" class="layui-input" v-model="form.name" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">保养单元</label>
                            <div class="layui-input-block">
                                <input type="text" name="unitName" class="layui-input" v-model="form.unitName" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">计划开始日</label>
                            <div class="layui-input-block">
                                <input type="text" id="plan-start-date" name="planStartDate" class="layui-input"
                                       v-model="form.planStartDate" :readonly="form.state>0">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">计划结束日</label>
                            <div class="layui-input-block">
                                <input type="text" id="plan-end-date" name="planEndDate" class="layui-input"
                                       v-model="form.planEndDate" :readonly="form.state>0">
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>0" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">负责人</label>
                            <div v-if="form.state>0" class="layui-input-block">
                                <input type="text" name="directorName" class="layui-input" v-model="form.directorName"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state==0" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">负责人</label>
                            <div class="layui-input-block">
                                <select id="director" lay-filter="director" lay-search>
                                    <option value="">选择负责人</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>0" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">创建人</label>
                            <div class="layui-input-block">
                                <input type="text" name="createByName" class="layui-input" v-model="form.createByName"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>2" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">审核人</label>
                            <div class="layui-input-block">
                                <input type="text" name="auditByName" class="layui-input" v-model="form.auditByName"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>0" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">创建时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="createTime" class="layui-input" v-model="form.createTime"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>1" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">完成时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="completeTime" class="layui-input" v-model="form.completeTime"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>2" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">审核时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="auditTime" class="layui-input" v-model="form.auditTime"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>2" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="text" name="stateText" class="layui-input" v-model="form.stateText"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>2" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">审核位置</label>
                            <div class="layui-input-block">
                                <input type="text" name="auditLocation" class="layui-input" v-model="form.auditLocation"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>2" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">审核结果</label>
                            <div class="layui-input-block">
                                <input type="text" name="auditResultText" class="layui-input"
                                       v-model="form.auditResultText" readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>2" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">审核次数</label>
                            <div class="layui-input-block">
                                <input type="text" name="auditTimes" class="layui-input" v-model="form.auditTimes"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>0" class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">完成情况</label>
                            <div class="layui-input-block">
                                <textarea readonly class="layui-textarea" name="completion"
                                          v-model="form.completion" :readonly="form.state>1"></textarea>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>1" class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">审核意见</label>
                            <div class="layui-input-block">
                                <textarea readonly class="layui-textarea" name="auditComment"
                                          v-model="form.auditComment" :readonly="form.state>2"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div v-if="form.state>0" class="layui-card">
        <div class="layui-card-header">专项任务
            <button v-if="form.state==1" type="button" class="layui-btn layui-btn-xs" @click="addItem">添加</button>
        </div>
        <div class="layui-card-body">
            <div id="layer-maintain-tasks"></div>
        </div>
    </div>
    <div v-if="form.state>2" class="layui-card">
        <div class="layui-card-header">审核照片（共<span id="imgs-count"></span>张）</div>
        <div class="layui-card-body">
            <div id="layer-images"></div>
        </div>
    </div>
    <div v-if="form.state>0" class="layui-card">
        <div class="layui-card-header">流程信息</div>
        <div class="layui-card-body">
            <div id="layer-activities"></div>
        </div>
    </div>
    <div style="text-align: center">
        <button class="layui-btn" v-if="form.state==0" @click="create">创建专项保养</button>
        <button class="layui-btn" v-if="form.state==1&&task.state==1" @click="complete">完成专项保养</button>
        <button class="layui-btn" v-if="form.state==2&&task.state==1" @click="audit(1)">通过</button>
        <button class="layui-btn layui-btn-danger" v-if="form.state==2&&task.state==1" @click="audit(2)">不通过
        </button>
        <button class="layui-btn layui-btn-primary" v-if="form.state>0&&form.state<2" @click="terminate">撤销</button>
    </div>
</div>

<script type="text/html" id="item-form">
    <div class="layui-card">
        <div class="layui-card-header">专项保养任务</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="item-form">
                <input type="hidden" name="maintainId">
                <input type="hidden" name="unit">
                <div class="layui-form-item">
                    <label class="layui-form-label">专项名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">保养单元</label>
                    <div class="layui-input-block">
                        <input type="text" name="unitName" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item layui-form" lay-filter="tunnels">
                    <label class="layui-form-label">建筑群</label>
                    <div class="layui-input-block">
                        <select id="tunnels" multiple="multiple">
                            <option value="">选择建筑群</option>
                        </select>
                    </div>
                </div>
                <div id="layer-areas" class="layui-form-item layui-form" lay-filter="areas">
                    <label class="layui-form-label">区域</label>
                    <div class="layui-input-block">
                        <select id="areas" multiple="multiple" lay-search>
                            <option value="">选择区域</option>
                        </select>
                    </div>
                </div>
                <div id="layer-device-system" class="layui-form-item layui-form" lay-filter="device-system">
                    <label class="layui-form-label">设备系统</label>
                    <div class="layui-input-block">
                        <select id="device-system" lay-search>
                            <option value="">选择设备系统</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-form" lay-filter="execute-by">
                    <label class="layui-form-label">执行人</label>
                    <div class="layui-input-block">
                        <select id="execute-by" lay-search>
                            <option value="">选择执行人</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-form" lay-filter="notify-names">
                    <label class="layui-form-label">通知人</label>
                    <div class="layui-input-block">
                        <select id="notify-names" lay-search>
                            <option value="">选择通知人</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="form-submit">确定</button>
                </div>
                <div style="height:200px;"></div>
            </form>
        </div>
    </div>
</script>
<script id="maintain-tasks-tpl" type="text/html">
    <ul class="layui-timeline">
        {{# layui.each(d, function (index, item) { }}
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe67b;</i>
            <div class="layui-timeline-content layui-text">
                <h4 style="font-weight: bold;"><a href="#" class="maintain-item"
                                                  data-id="{{item.id}}">{{item.name}}【{{item.stateText}}】</a>
                </h4>
                <p>{{item.createTime || ''}} ~ {{item.completeTime || ''}}</p>
            </div>
        </li>
        {{# }); }}
        {{# if(d.length === 0){ }}
        暂无数据
        {{# } }}
    </ul>
</script>
<script id="activities-tpl" type="text/html">
    <ul class="layui-timeline">
        {{# layui.each(d, function (index, item) { }}
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h4 style="font-weight: bold;">{{item.name}}【{{item.ownerName}}】</h4>
                <p>{{item.completeTime || '待完成'}}</p>
            </div>
        </li>
        {{# }); }}
        {{# if(d.length === 0){ }}
        暂无流程数据
        {{# } }}
    </ul>
</script>
<script src="/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/common.js"></script>
<script src="/js/vue.min.js"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'laytpl', 'laydate','multiSelect'], function () {
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var multiSelect = layui.multiSelect;
        var admin = layui.admin;
        var id = getParam('id');
        var taskId = getParam('taskId');
        var maintainPlans = [];
        layui.util.fixbar();

        function loadUsers(callback) {
            $.get('/users', function (result) {
                if (callback) {
                    callback(result.data);
                }
            });
        }

        function loadTunnels(callback) {
            $.get('/tunnels', function (result) {
                if (callback) {
                    callback(result.data);
                }
            });
        }

        function loadAreas(callback) {
            $.get('/locations', function (result) {
                if (callback) {
                    callback(result.data);
                }
            });
        }

        function loadDevicesSystems(callback) {
            $.get('/device-systems', function (result) {
                if (callback) {
                    callback(result.data);
                }
            });
        }

        function showMaintainTask(id) {
            layer.open({
                title: '保养任务详情',
                type: 2,
                content: 'maintain-task.html?id=' + id,
                area: ['840px', '630px'],
                maxmin: true
            });
        }

        form.on("select(maintain-name)", function (data) {
            var item = maintainPlans[data.value];
            vue.form.maintainPlanId = item.id;
            vue.form.name = item.name;
            vue.form.unit = item.unit;
            vue.form.unitName = item.unitName;
        });

        form.on("select(director)", function (data) {
            vue.form.directorName = data.value;
        });

        form.on('submit(form-submit)', function (data) {
            var tunnels = [];
            $('#tunnels option:selected').each(function() {
                tunnels.push($(this).text());
            })
            var areas = [];
            $('#areas option:selected').each(function() {
                areas.push($(this).text());
            })
            data.field.tunnels = tunnels.toString();
            data.field.areas = areas.toString();
            data.field.deviceSystem = $('#device-system option:selected').text();
            data.field.executeByName = $('#execute-by option:selected').text();
            data.field.notifyNames = $('#notify-names option:selected').text();
            createItem(data.field);
            if (popupIndex) {
                layer.close(popupIndex);
            }
            return false;
        });

        function createItem(data) {
            if (!data.tunnels) {
                layer.msg('请选择建筑群');
                return;
            }
            if (data.unit == 2 && !data.areas) {
                layer.msg('请选择区域');
                return;
            }
            if (data.unit == 3 && !data.deviceSystem) {
                layer.msg('请选择设备系统');
                return;
            }
            if (!data.executeByName) {
                layer.msg('请选择执行人');
                return;
            }
            $.post('/maintain-tasks/create', {
                maintainId: data.maintainId,
                name: data.name,
                unit: data.unit || '',
                tunnels: data.tunnels,
                areas: data.areas,
                deviceSystem: data.deviceSystem,
                executeByName: data.executeByName,
                notifyNames: data.notifyNames
            }, function () {
                $.get('/maintain-tasks', {maintainId: data.maintainId}, function (res) {
                    //专项保养信息
                    var tpl = $('#maintain-tasks-tpl').html();
                    laytpl(tpl).render(res.data, function (html) {
                        $('#layer-maintain-tasks').html(html);
                    });
                    $('.maintain-item').on('click', function () {
                        showMaintainTask($(this).data('id'));
                    });
                });
            });
        }

        var vue = new Vue({
            el: "#container",
            data() {
                return {
                    form: {
                        maintainPlanId: '',
                        name: '',
                        unit: '',
                        unitName: '',
                        directorName: '',
                        planStartDate: '',
                        planEndDate: '',
                        state: 0
                    },
                    task: {}
                }
            },
            mounted() {
                if (taskId) {
                    this.loadTask(taskId);
                } else if (id) {
                    this.loadForm(id);
                } else {
                    this.loadMaintainPlans();
                    this.loadDirectors();
                }

                laydate.render({
                    elem: '#plan-start-date'
                });
                laydate.render({
                    elem: '#plan-end-date'
                });
            },
            updated() {
                form.render();
            },
            methods: {
                loadForm(id) {
                    let that = this;
                    $.get('/maintains/' + id, function (result) {
                        var data = result.data;
                        that.form = data;
                        form.val('maintain-form', data);
                        //专项任务
                        $.get('/maintain-tasks', {maintainId: data.id}, function (res) {
                            //专项保养信息
                            var tpl = $('#maintain-tasks-tpl').html();
                            laytpl(tpl).render(res.data, function (html) {
                                $('#layer-maintain-tasks').html(html);
                            });
                            $('.maintain-item').on('click', function () {
                                showMaintainTask($(this).data('id'));
                            });
                        });
                        //加载上传图片
                        if (data.auditImgs) {
                            var images = data.auditImgs.split(',');
                            $("#layer-images").empty();
                            for (var i in images) {
                                var img = images[i];
                                var item = '<img layer-src="/img/' + img + '" src="/img/' + img + '">';
                                $('#layer-images').append(item);
                            }
                            $('#imgs-count').text(images.length);
                            layer.photos({
                                photos: '#layer-images',
                                anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
                            });
                        }
                        //流程信息
                        $.get('/tasks/proc-inst-tasks', {procInstId: data.procInstId}, function (res) {
                            var tpl = $('#activities-tpl').html();
                            laytpl(tpl).render(res.data, function (html) {
                                $('#layer-activities').html(html);
                            });
                        });
                    });
                },
                loadTask(taskId) {
                    let that = this;
                    $.get('/tasks/' + taskId, function (res) {
                        that.task = res.data;
                        if (that.task) {
                            that.loadForm(that.task.formKey);
                        }
                        if (that.task.state == 2) {
                            layer.msg('该任务已处理');
                        }
                    });
                },
                loadMaintainPlans() {
                    let that = this;
                    $.get('/maintain-plans', function (res) {
                        var result = res.data;
                        for (var i in result) {
                            var item = result[i];
                            maintainPlans[item.id] = item;
                            $('#maintain-name').append('<option value="' + item.id + '">' + item.name + '</option>');
                        }
                        form.render();
                    });
                },
                loadDirectors() {
                    $.get('/users/roleIds/3,4,5', function (res) {
                        var result = res.data;
                        for (var i in result) {
                            var item = result[i];
                            $('#director').append('<option value="' + item.name + '">' + item.name + '</option>');
                        }
                        form.render();
                    });
                },
                create() {
                    this.form.planStartDate = $('#plan-start-date').val();
                    this.form.planEndDate = $('#plan-end-date').val();
                    if (!this.form.name) {
                        layer.msg('请选择保养名称');
                        return;
                    }
                    if (!this.form.directorName) {
                        layer.msg('请选择负责人');
                        return;
                    }
                    if (!this.form.planStartDate) {
                        layer.msg('请选择计划开始日期');
                        return;
                    }
                    if (!this.form.planEndDate) {
                        layer.msg('请选择计划结束日期');
                        return;
                    }
                    $.post('/maintains/create', {
                        maintainPlanId: this.form.maintainPlanId,
                        name: this.form.name,
                        unit: this.form.unit || '',
                        directorName: this.form.directorName,
                        planStartDate: this.form.planStartDate,
                        planEndDate: this.form.planEndDate
                    }, function (res) {
                        window.location.reload();
                    });
                },
                addItem() {
                    let that = this;
                    popupIndex = admin.popupRight({
                        area: '360px',
                        success: function () {
                            var formHtml = $('#item-form').html();
                            $('#' + this.id).html(formHtml);
                            var data = {};
                            data.maintainId = that.form.id;
                            data.name = that.form.name;
                            data.unit = that.form.unit;
                            data.unitName = that.form.unitName;
                            form.val('item-form', data);
                            form.render();

                            if(data.unit == 1){
                                $('#layer-areas').hide();
                                $('#layer-device-system').hide();
                            }else if(data.unit == 2){
                                $('#layer-device-system').hide();
                            }else if(data.unit == 3){
                                $('#layer-areas').hide();
                            }

                            loadUsers(function (result) {
                                for (var i in result) {
                                    var item = result[i];
                                    $('#execute-by').append('<option value="' + item.id + '">' + item.name + '</option>');
                                    $('#notify-names').append('<option value="' + item.id + '">' + item.name + '</option>');
                                }
                                form.render('select','execute-by');
                                form.render('select','notify-names');
                            });

                            loadTunnels(function (result) {
                                for (var i in result) {
                                    var item = result[i];
                                    $('#tunnels').append('<option value="' + item.id + '">' + item.name + '</option>');
                                }
                                multiSelect.render('select', 'tunnels');
                            });

                            loadAreas(function (result) {
                                for (var i in result) {
                                    var item = result[i];
                                    $('#areas').append('<option value="' + item.id + '">' + item.name + '</option>');
                                }
                                multiSelect.render('select', 'areas');
                            });

                            loadDevicesSystems(function (result) {
                                for (var i in result) {
                                    var item = result[i];
                                    $('#device-system').append('<option value="' + item.id + '">' + item.name + '</option>');
                                }
                                form.render('select','device-system');
                            });
                        }
                    });
                    return popupIndex;
                },
                complete() {
                    let that = this;
                    if (!this.form.completion) {
                        layer.msg('输入完成情况');
                        return;
                    }
                    $.post('/maintains/complete', {
                        taskId: that.task.id,
                        id: this.form.id,
                        completion: this.form.completion || ''
                    }, function (res) {
                        window.location.reload();
                    });
                },
                audit(auditResult) {
                    let that = this;
                    let auditComment = that.form.auditComment;
                    if (auditResult == 2 && !auditComment) {
                        layer.msg('输入审核意见');
                        return;
                    }
                    $.post('/maintains/audit', {
                        taskId: that.task.id,
                        id: that.form.id,
                        auditResult: auditResult,
                        auditComment: that.form.auditComment || '',
                        auditLocation: that.form.auditLocation || ''
                    }, function () {
                        layer.msg('提交成功');
                        window.location.reload();
                    });
                },
                terminate() {
                    let that = this;
                    layer.confirm('确定撤销该工单吗？', function (index) {
                        $.post('/maintains/terminate', {
                            id: that.form.id
                        }, function () {
                            window.location.reload();
                        });
                    });
                }
            }
        })

    });
</script>
</body>
</html>